<template>
  <div>
    <div class="toolbar">
      <div class="button-group">
        <el-button-group>
          <el-button type="primary" size="small" @click="switchPc">
            <img src="@/assets/image/computer.png">
          </el-button>
          <el-button type="primary" size="small" @click="switchPhone">
            <img src="@/assets/image/phone.png">
          </el-button>
        </el-button-group>
      </div>
      <div class="split-line" />
      <div class="button-group">
        <el-button type="primary" size="small" @click="handelDelete">
          <img src="@/assets/image/deleteIcon.png">
        </el-button>
      </div>
      <div class="split-line" />
      <div class="button-group">
        <el-select v-model="equipment" placeholder="请选择设备" @change="changeEquipment(equipment)">
          <el-option
            v-for="item in equipmentList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'Top',
    props: {
      // isPc: {
      //   type: Boolean,
      //   default: true
      // },
      list2: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data () {
      return {
        equipment: '', // 表格中选择的设备
        index: 0, // 动态组件list2的索引值
        equipmentList: [ // 表格中设备列表
          {
            value: 'sdf',
            label: 'sdf'
          }
        ]
      }
    },
    methods: {
        // 切换为Pc端
      switchPc () {
        this.$store.state.isPc = true
        // this.isPc = true
        // console.log(this.isPc)
      },
      // 切换为手机端
      switchPhone () {
        this.$store.state.isPc = false
        // this.isPc = false
        // console.log(this.isPc)
      },
      // 删除卡片
      handelDelete () {
        console.log(this.index)
        this.list2.splice(this.index, 1)
      },
      // 设置表格中的数据流
      changeEquipment (equipment) {
        console.log(equipment)
      }
    }
}
</script>

<style scoped>
  .toolbar{
    margin-left: 256px;
    width: 100%;
    height: 50px;
    background-image: linear-gradient(135deg, #041424 0%, #04294E 50%, #362D72 100%);
    position: fixed;

    right: 0;
    top: 0;
    z-index: 9;
  }
  .button-group{
    height: 40px;
    float: left;
    margin: 5px 10px;
  }
  .split-line{
    height: 34px;
    border-right: 1px dashed #fff;
    float: left;
    position: relative;
    top: 8px;
  }
</style>
